<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        background-color: #333;
        /* background-color: rgb(227, 250, 20); */
        /* color: #c5f8fc; */
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <script>
      const canvas = document.createElement("canvas");
      canvas.width = 800;
      canvas.height = 600;
      document.body.append(canvas);
      const context = canvas.getContext("2d");

      // context.fillStyle = "skyblue";
      // let x = 0;
      // function move() {
      //   context.clearRect(0, 0, 800, 600);
      //   context.fillRect((x += 1), 100, 100, 100);
      //   requestAnimationFrame(move);
      // }
      // requestAnimationFrame(move);

      let earthAngle = 0;
      let moonAngle = 0;
      const render = () => {
        context.clearRect(0, 0, 800, 600);
        context.save();
        context.setLineDash([4, 4]);

        context.beginPath();
        context.shadowBlur = 50;
        context.shadowColor = "rgb(227, 250, 20)";
        // let g = context.createRadialGradient(400, 300, 0, 400, 300, 100);
        // g.addColorStop(0, "#ff5410");
        // g.addColorStop(0.5, "#ffab10");
        // g.addColorStop(0.9, "#ffdb10");
        // g.addColorStop(1, "rgb(227, 250, 20)");
        context.fillStyle = "rgb(227, 250, 20)";
        context.arc(400, 300, 100, 0, 2 * Math.PI);
        context.fill();

        context.shadowBlur = 0;
        // context.beginPath();
        // context.strokeStyle = "skyblue";
        // context.arc(400, 300, 200, 0, 2 * Math.PI);
        // context.stroke();

        context.beginPath();
        context.fillStyle = "blue";
        context.translate(400, 300);
        context.rotate((((earthAngle += 1) % 360) * Math.PI) / 180);
        context.translate(200, 0);
        context.arc(0, 0, 20, 0, 2 * Math.PI);
        context.fill();

        // context.beginPath();
        // context.arc(0, 0, 40, 0, 2 * Math.PI);
        // context.stroke();

        // context.restore();
        context.beginPath();
        // context.translate(400, 300);
        context.rotate((((moonAngle += 3) % 360) * Math.PI) / 180);
        context.translate(40, 0);
        context.fillStyle = "#c5f8fc";
        context.arc(0, 0, 7, 0, 2 * Math.PI);
        context.fill();

        context.restore();
        requestAnimationFrame(render);
      };

      render();
    </script>
  </body>
</html>
